.loginWarp {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  // background: radial-gradient(
  //     circle at 60% 90%,
  //     rgba(46, 103, 161, 1),
  //     transparent 60%
  //   ),
  //   radial-gradient(
  //     circle at 20px 20px,
  //     rgba(72, 120, 168, 0.8),
  //     transparent 25%
  //   ),
  //   #182336;

  :global {
    .loginVideoWarp {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      overflow: hidden;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      .loginVideo {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .login-content {
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      position: absolute;
      top: 0;
      z-index: 10;
    }
    .login_bottom-info {
      position: absolute;
      bottom: 10px;
      width: 100%;
      text-align: center;
      z-index: 99;
      a {
        color: #fff;
      }
    }

    .userAgreementInfoBox {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      display: flex;

      .info_item {
        color: #fff;
        font-size: 12px;
        margin: 0 4px;
        border-bottom: 1px solid #fff;
        cursor: pointer;
        &:hover {
          color: hsl(49, 98%, 60%);
          border-bottom: 1px solid hsl(49, 98%, 60%);
        }
      }
    }

    .typeLoginBox {
      width: 400px;
      height: auto;
      border-radius: 20px;
      padding-bottom: 20px;
      position: absolute;
      top: 50%;
      right: 100px;
      transform: translateY(-50%);
      text-align: center;
      color: rgba(255, 255, 255, 0.8);

      background: linear-gradient(
        to top right,
        rgba(38, 43, 48, 0.5),
        rgba(19, 24, 32, 0.8)
      );

      transition: all 0.5s ease-in-out;

      .logo {
        display: block;
        margin: 10px auto;
        width: 150px;
        // height: 150px;
      }
      .title {
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 14px;
        margin-top: 10px;
        font-weight: bold;
      }

      @media only screen and (max-width: 600px) {
        width: 90%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .typeLoginBox2{
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

    .typeLoginBox {
      #qrCode {
        margin-top: 30px;
      }

      .login_method-box {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px;

        .activeloginItem {
          padding-bottom: 5px;
          border-bottom: 2px solid #fdd835;
        }
      }

      .submitBtnText {
        width: 80%;
        margin: 0 auto;
        margin-top: 10px;
      }

      .testContent {
        height: 250px;
        text-align: left;
        padding: 20px;
        box-sizing: border-box;
        text-indent: 20px;
        color: #fff;
      }

      .phoneLogin {
        width: 100%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .phone_login-warp {
          width: 100%;

          .title {
            width: 100%;
            text-align: center;
            margin-top: 0;
            margin-bottom: 30px;
            color: hsl(49, 98%, 60%);
          }
          .content-box {
            width: 100%;
            .input_space-warp {
              width: 80%;
            }
            .ant-space-item {
              border: 1px solid #157cdc;
              border-radius: 15px;
              overflow: hidden;

              input:-webkit-autofill,
              input:-webkit-autofill:hover,
              input:-webkit-autofill:focus,
              input:-webkit-autofill:active {
                -webkit-transition-delay: 111111s;
                -webkit-transition: color 11111s ease-out,
                  background-color 111111s ease-out;
              }
            }

            .tools_btns {
              width: 80%;
              margin: 0 auto;
              display: flex;
              justify-content: space-between;
              margin-top: 20px;
              .btns-item {
                text-decoration: dashed;
                cursor: pointer;
                border-bottom: 1px solid #fff;
                &:hover {
                  color: #fdd835;
                }
              }
            }
          }
        }

        .verification_code-box {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .get_verification,
          .verification_code {
            flex: 1;
            height: auto;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 5px;
            border-radius: 5px;
            color: dimgray;
            cursor: pointer;
          }
        }
      }

      .wxLoginBox {
        .title {
          width: 100%;
          text-align: center;
          margin-bottom: 0px;
          color: hsl(49, 98%, 60%);
        }

        .refreshWxCode {
          color: red;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
  }
}
